* {
    margin: 0;
    padding: 0;
    font-family: PingFangSC-Semibold;
}

body {
    padding: 2px 2px 0 2px;
    background-color: #331919;
}

a {
    text-decoration: none;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    >div:nth-of-type(1) {
        display: flex;
        align-items: center;
        height: 47px;
        img {
            width: 85px;
            height: 20px;
            margin-left: 13px;
            margin-right: 10px;
        }
        div {
            width: 51px;
            height: 17px;
            background-color: #ffe555;
            border-radius: 3px;
            font-size: 10px;
            line-height: 17px;
            text-align: center;
            color: #311a10;
        }
    }
    >div:nth-of-type(2) {
        display: flex;
        align-items: center;
        a {
            margin-left: 2px;
            display: block;
            width: 120px;
            height: 47px;
            line-height: 47px;
            background-color: #ff5b55;
            border-radius: 5px;
            text-align: center;
            font-size: 12px;
            color: #ffffff;
        }
    }
}

.headline {
    margin-top: 2px;
    >div:nth-of-type(1) {
        height: 48px;
        display: flex;
        div {
            width: 48px;
            height: 48px;
            background-color: #ff5b55;
            border-radius: 5px;
            text-align: center;
            font-size: 12px;
            line-height: 48px;
            color: #fff;
        }
        input {
            margin-left: 2px;
            padding-left: 20px;
            width: 355px;
            height: 48px;
            background-color: #ffffff;
            border-radius: 5px;
            outline: none;
            -webkit-appearance: none;
            border: 0;
        }
        a {
            margin-left: 2px;
            width: 127px;
            height: 48px;
            background-color: #ff5b55;
            border-radius: 5px;
            text-align: center;
            font-size: 12px;
            line-height: 48px;
            color: #fff;
        }
        a:nth-of-type(2) {
            background-color: #1ecb6a;
        }
        a:nth-of-type(3) {
            background-color: #ffffff;
            color: #000000;
        }
    }
    >div:nth-of-type(2) {
        height: 52px;
        display: flex;
        div {
            text-align: center;
            line-height: 52px;
            font-size: 12px;
            color: #b96b49;
        }
        >div:nth-of-type(1) {
            width: 275px;
        }
        >div:nth-of-type(2) {
            width: 202px;
        }
        >div:nth-of-type(3) {
            width: 421px;
        }
        >div:nth-of-type(4) {
            width: 108px;
            margin-left: 2px;
        }
    }
}

.content {
    height: 617px;
    overflow-y: scroll;
    .list {
        margin-top: 2px;
        width: 1008px;
        height: 48px;
        display: flex;
        >div:nth-of-type(1) {
            border-radius: 5px;
            width: 898px;
            display: flex;
            background: #fff;
            >div {
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 16px;
                color: #000000;
            }
            >div:nth-of-type(1) {
                width: 275px;
            }
            >div:nth-of-type(2) {
                width: 202px;
            }
            >div:nth-of-type(3) {
                width: 421px;
            }
        }
        >div:nth-of-type(2) {
            margin-left: 2px;
            width: 108px;
            color: #fff;
            background: #5ba8ff;
            border-radius: 5px;
            text-align: center;
            line-height: 48px;
        }
    }
}

.content::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #fff;
    border-radius: 10px;
    background-color: #fff;
}

.content::-webkit-scrollbar {
    width: 10px;
    background-color: #fff;
    border-radius: 10px;
}

.content::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset #fff;
    background-color: #bbbbbb;
}

/* 商品规格 */

.pupop {
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}

.pupop-content {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 571px;
    height: 476px;
    margin-left: -285.5px;
    margin-top: -238px;
    .pupop-headline {
        width: 64px;
        height: 24px;
        background-color: #ffe555;
        border-radius: 3px;
        margin: 0 auto;
        line-height: 24px;
        font-size: 12px;
        color: #000000;
        text-align: center;
    }
    >div:nth-of-type(2) {
        display: flex;
        height: 54px;
        >div {
            text-align: center;
            height: 54px;
            line-height: 54px;
            font-size: 12px;
            color: #ffffff;
        }
        >div:nth-of-type(1) {
            width: 101px;
        }
        >div:nth-of-type(2) {
            width: 118px;
        }
        >div:nth-of-type(3) {
            width: 118px;
        }
        >div:nth-of-type(4) {
            width: 132px;
        }
        >div:nth-of-type(5) {
            width: 90px;
        }
    }
    >div:nth-of-type(3) {
        height: 198px;
        overflow-y: scroll;
        >div {
            margin-top: 2px;
            display: flex;
            height: 48px;
            >div {
                background-color: #fff;
                text-align: center;
                height: 48px;
                font-size: 12px;
                display: flex;
                justify-content: center;
                align-items: center;
                p {
                    padding: 0 10px;
                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
            }
            >div:nth-of-type(1) {
                border-radius: 5px 0 0 5px;
                width: 101px;
            }
            >div:nth-of-type(2) {
                width: 118px;
            }
            >div:nth-of-type(3) {
                width: 118px;
            }
            >div:nth-of-type(4) {
                width: 132px;
            }
            >div:nth-of-type(5) {
                border-radius: 0 5px 5px 0;
                width: 90px;
            }
        }
        >div:nth-of-type(1) {
            margin-top: 0;
        }
    }
    #pupop-roll::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px #fff;
        border-radius: 10px;
        background-color: #fff;
    }
    #pupop-roll::-webkit-scrollbar {
        width: 10px;
        background-color: #fff;
        border-radius: 10px;
    }
    #pupop-roll::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset #fff;
        background-color: #bbbbbb;
    }
    >div:nth-of-type(4) {
        width: 559px;
        margin-top: 2px;
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #000000;
        >div:nth-of-type(1) {
            display: flex;
            >div {
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 5px;
                height: 48px;
                background-color: #ffffff;
            }
            >div:nth-of-type(1) {
                width: 218px;
            }
            >div:nth-of-type(2) {
                margin-left: 2px;
                width: 116px;
            }
        }
        >div:nth-of-type(2) {
            width: 116px;
            height: 48px;
            background-color: #ffffff;
            border-radius: 5px;
            text-align: center;
            line-height: 48px;
        }
    }
    >div:nth-of-type(5) {
        width: 559px;
        margin-top: 2px;
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #000000;
        >div:nth-of-type(1) {
            display: flex;
            >div {
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 5px;
                height: 48px;
                background-color: #ffffff;
            }
            >div:nth-of-type(1) {
                width: 48px;
            }
            >div:nth-of-type(2) {
                margin-left: 2px;
                width: 107px;
            }
            >div:nth-of-type(3) {
                margin-left: 2px;
                width: 107px;
            }
        }
        >div:nth-of-type(2) {
            width: 116px;
            height: 48px;
            background-color: #ffffff;
            border-radius: 5px;
            text-align: center;
            line-height: 48px;
        }
    }
    >a {
        margin-top: 2px;
        display: block;
        width: 559px;
        height: 48px;
        background-color: #5ba8ff;
        border-radius: 5px;
        text-align: center;
        line-height: 48px;
        font-size: 12px;
        color: #ffffff;
    }
    >div:nth-of-type(6) {
        margin-top: 2px;
        width: 559px;
        height: 48px;
        background-color: #ffffff;
        border-radius: 5px;
        text-align: center;
        line-height: 48px;
        font-size: 12px;
    }
}